<template>
  <div class="await_box">
    <div class="rightTent">
      <div style="display: flex; height: 170px;">
        <div @click="skip('/audit/examine/await')" class="flex_one">
          <div style="width: 55px;"></div>
          <div style="margin-left: 20px">
            <div style="color: #fff; display: flex; align-items: center; margin-bottom: 15px;">待办审批
              <span v-if="dataList1.noRead" style="color: #FE5A57;background-color: #fff; border-radius: 15px; padding: 0 8px; margin-left: 5px;">{{ dataList1.noRead }}</span>
            </div>
            <div style="font-size: 30px;color: #fff;">{{ dataList1.num }}</div>
          </div>
        </div>
        <div @click="skip('/audit/examine/initiat')" class="flex_one flex_two">
          <div style="width: 55px;"></div>
          <div style="margin-left: 20px">
            <div style="color: #fff; display: flex; align-items: center; margin-bottom: 15px;">发起审批
            </div>
            <div style="font-size: 30px;color: #fff;">{{ dataList1.startNum }}</div>
          </div>
        </div>
        <div @click="skip('/audit/examine/already')" class="flex_one flex_s">
          <div style="width: 55px;"></div>
          <div style="margin-left: 20px">
            <div style="color: #fff; display: flex; align-items: center; margin-bottom: 15px;">已办审批
            </div>
            <div style="font-size: 30px;color: #fff;">{{ dataList1.approvedNum }}</div>
          </div>
        </div>
        <div @click="skip('/audit/examine/sendDuplicate')" class="flex_one flex_w">
          <div style="width: 55px;"></div>
          <div style="margin-left: 20px">
            <div style="color: #fff; display: flex; align-items: center; margin-bottom: 15px;">抄送审批
              <span v-if="dataList1.sendReadNum" style="color: #FE5A57;background-color: #fff; border-radius: 15px; padding: 0 8px; margin-left: 5px;">{{ dataList1.sendReadNum }}</span>
            </div>
            <div style="font-size: 30px;color: #fff;">{{ dataList1.sendNum }}</div>
          </div>
        </div>
      </div>
      <div class="between">
        <div style="display: flex; justify-content: space-between;padding: 15px 20px;">
          <div style="font-weight: 700; padding-left: 10px; border-left: 3px solid #496DFF;">审批统计</div>
          <div style="display: flex;">
            <div style="display: flex; align-items: center;margin: 0 10px;">
              <span style="background-color: #496DFF; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px;"></span>
              <span>待办审批</span>
            </div>
            <div style="display: flex; align-items: center;margin: 0 10px;">
              <span style="background-color:#FFAD33; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px;"></span>
              <span>发起审批</span>
            </div>
            <div style="display: flex; align-items: center;margin: 0 10px;">
              <span style="background-color: #FE5A57; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px;"></span>
              <span>抄送审批</span>
            </div>
          </div>
        </div>
        <div ref="chart" id="chart">
        </div>
      </div>
      <!-- </template> -->
    </div>
    <div class="leftTent">
      <div style="border-bottom: 1px solid #EAEAEA; padding-bottom: 10px;">
        <div style="margin-left: 10px; padding: 0 8px; font-weight: 700; padding: 0 10px; border-left: 3px solid #496DFF; display: flex; justify-content: space-between;">
          <span>待办审批</span>
          <i @click="skip('/audit/examine/await')" class="el-icon-arrow-right i_await"></i>
        </div>
      </div>
      <div style=" height: calc(100% - 35px); transform: translate(0);">
        <div style="height: 100%;" ref="scroll" @scroll.passive="getScroll($event)">
          <!-- 回到顶部 -->
          <transition name="fade">
            <div v-show="scrollSta" @click="cScroll" class="scrollDown">
              <i class="el-icon-caret-top"></i>
            </div>
          </transition>
          <load-more :pageNum.sync="queryParams.pageNum" :pages="pages" :disabled.sync="disabled" @changeData="getList">
            <audit-list @change="checkItem" :dataIndex="dataIndex" :tableData="tableData"></audit-list>
          </load-more>
        </div>
      </div>
    </div>
    <hu-drawer title="同意" :open.sync="open1" :loading="loading" @submit="commit1">
      <!-- tent sta -->
      <div>
        <el-form label-width="110px">
          <el-form-item v-if="auditList.id === 'c98ebdffc46b1fde1b792ad43fa6180e'" label="是否现场监理" prop="isSceneSupervision">
            <el-radio-group v-model="formChart.isSceneSupervision">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="opinion">
            <el-input v-model="formChart.opinion" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"   />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-drawer>
    <hu-drawer title="拒绝" :open.sync="open2" :loading="loading" @submit="commit2">
      <!-- tent sta -->
      <div>
        <el-form label-width="110px">
          <el-form-item label="拒绝原因" prop="opinion">
            <el-input v-model="formChart.opinion" placeholder="请输入拒绝原因" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"   />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-drawer>
  </div>
</template>
<script>
// 上滑加载更多
import LoadMore from "@/components/LoadMore/LoadMore";
import * as echarts from "echarts";
import * as http from "@/api/audit/index.js";
import Audit from "../components/audit/audit.vue";
import auditList from "./examine/components/auditList.vue";
import essentialItem from "@/views/components/audit/essentialItem.vue";
export default {
  components: {
    Audit,
    auditList,
    essentialItem,
    LoadMore
  },
  name: "AuditIndex",
  computed: {
    getCurrent() {
      return (type) => {
        if (type == 1 || type == 2 || type == 4) {
          return {
            typeBut: "typeBut1",
            icon: "el-icon-more",
            color: { color: " #496dff" },
            bgc: { "background-color": "#5a8bff" },
          };
        } else if (type == 3) {
          return {
            typeBut: "typeBut2",
            icon: "el-icon-check",
            color: { color: " #39ce78" },
            bgc: { "background-color": "#39ce78" },
          };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return {
            typeBut: "typeBut3",
            icon: "el-icon-close",
            color: { color: " #fe5a57" },
            bgc: { "background-color": "#fe5a57" },
          };
        } else {
          return {};
        }
      };
    },
    // 审批状态文字
    getTitle() {
      return (type) => {
        if (type == 0) {
          return "";
        } else if (type == 2) {
          return "待审批";
        } else if (type == 3) {
          return "已完成";
        } else if (type == 6) {
          return "已驳回";
        } else if (type == 7) {
          return "已撤销";
        }
      };
    },
  },
  data() {
    return {
      open1: false,
      open2: false,
      dataIndex: undefined,
      disabled: false,
      loading: true, // 加载
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pages: 1,
      total: 0, // table total
      tableData: [], // table Data
      formChart: {},
      title: undefined,
      time: null,
      scrollSta: false,
      auditList: {},
      rowTaskId: null,
      dataList1: {},
      dataList2: [],
    };
  },
  created() {
    this.getListAll();
  },
  methods: {
    getListAll() {
      this.getList();
      this.getList1();
      this.getList2();
    },
    getLoadEcharts() {
      var myChart = echarts.init(document.getElementById("chart"));
      let option;
      let title = [];
      let data1 = [];
      let data2 = [];
      let data3 = [];
      this.dataList2.forEach((e) => {
        title.push(e.date);
        data1.push(e.daibanNum);
        data2.push(e.startNum);
        data3.push(e.sendNum);
      });
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "4%",
          top: "5%",
          containLabel: true,
        },
        xAxis: {
          data: title,
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#11417a",
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#89C3DD", //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#11417a",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: [5, 10],
                dashOffset: 10,
                color: "#0f68a0",
              },
            },
            axisLabel: {
              color: "#89C3DD",
            },

            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "待办审批",
            type: "bar",
            stack: "1",
            z: 10,
            barMaxWidth: 15,
            barGap: "10%",
            itemStyle: {
              color: "#496DFF",
              barBorderRadius: [30, 30, 0, 0],
            },
            data: data1,
          },

          {
            name: "发起审批",
            type: "bar",
            stack: "1",
            itemStyle: {
              color: "#FFAD33",
              barBorderRadius: [30, 30, 0, 0],
            },
            data: data2,
          },
          {
            name: "抄送审批",
            type: "bar",
            stack: "1",
            barMaxWidth: 15,
            barGap: "10%",
            z: 10,
            itemStyle: {
              color: "#FE5A57",
              barBorderRadius: [30, 30, 0, 0],
            },
            data: data3,
          },
        ],
      };

      // 使用更新后的 option，渲染图表
      myChart.setOption(option);
    },
    // 选择某一项
    checkItem(row) {
      this.rowTaskId = row[0].id;
      this.auditList = row[0];
      this.dataIndex = row[1];
    },
    skip(url) {
      this.$router.push(url);
    },
    cScroll() {
      this.scrollSta = false;
      this.$refs.scroll.scrollTop = 0;
    },
    getScroll(event) {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        // 滚动条距离底部的距离
        if (event.target.scrollTop > 1500) {
          //  操作
          this.scrollSta = true;
        } else {
          this.scrollSta = false;
        }
      }, 100);
    },
    // 列表 List
    getList() {
      this.loading = true;
      let params = {
        ...this.queryParams,
        moduleId: this.queryParams.moduleId
          ? this.queryParams.moduleId[this.queryParams.moduleId.length - 1]
          : undefined,
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.tableData.push(...result.records);
          this.pages = result.pages;
          this.total = result.total;
          // 默认选择第一个
          if (this.tableData.length && this.queryParams.pageNum === 1) {
            this.rowTaskId = undefined;
            this.$nextTick(() => {
              this.checkItem([this.tableData[0], 0]);
            });
          }
        }
      });
    },
    getList1() {
      http
        .getList1(this.$store.getters.userInfo.id)
        .then(({ stateCode, result }) => {
          if (stateCode == 200) {
            this.dataList1 = result;
          }
        });
    },
    getList2() {
      http
        .getList2(this.$store.getters.userInfo.id)
        .then(({ stateCode, result }) => {
          if (stateCode == 200) {
            this.dataList2 = result;
          }
          this.$nextTick(() => {
            this.getLoadEcharts();
          });
        });
    },
    // 查询 list
    searchList() {
      this.cScroll();
      this.queryParams.pageNum = 1;
      this.disabled = false;
      this.tableData = [];
      this.getList();
    },
    commit1() {
      this.loading = true;
      let params = {
        ...this.formChart,
        userId: this.$store.getters.userInfo.id,
        id: this.auditList.id,
        isSceneSupervision: true,
      };
      http.approve(params).then((response) => {
        this.$modal.msgSuccess("同意审批成功");
        this.searchList();
        this.open1 = false;
      });
    },
    commit2() {
      this.loading = true;
      let params = {
        ...this.formChart,
        userId: this.$store.getters.userInfo.id,
        id: this.auditList.id,
      };
      http.rejected(params).then((response) => {
        this.$modal.msgSuccess("拒绝审批成功");
        this.searchList();
        this.open2 = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.between {
  height: calc(100% - 180px);
  margin: 10px;
  margin-bottom: 0;
  background: white;
}
#chart {
  height: 80%;
}
.await_box {
  height: calc(100vh - 170px);
  display: flex;
  .leftTent {
    flex: 0 0 350px;
    padding: 15px 0;
    background: white;
    border-radius: 3px;
    margin-right: 15px;
    overflow: hidden;
  }
  .rightTent {
    flex: 1;
    border-radius: 3px;
    .flex_one {
      cursor: pointer;
      width: 25%;
      background: url("../../assets/images/tabList1.png") no-repeat;
      background-size: 100% 100%;
      margin: 10px;
      margin-top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s;
      &:hover {
        transform: scale(1.05);
      }
    }
    .flex_two {
      background: url("../../assets/images/tabList2.png") no-repeat;
      background-size: 100% 100%;
      margin-left: 0;
      margin-right: 0;
    }
    .flex_s {
      background: url("../../assets/images/tabList3.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 0;
    }
    .flex_w {
      background: url("../../assets/images/tabList4.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .scrollDown {
    cursor: pointer;
    position: fixed;
    bottom: 40px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.55);
    width: 40px;
    height: 40px;
    box-shadow: 0 0 6px rgba(0, 21, 41, 0.35);
    // box-shadow: 0 0 6px rgb(0 0 0 / 12%);
    color: #496dff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    i {
      font-size: 28px;
      transition: 0.3s;
    }
  }
  .scrollDown:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 6px rgba(0, 21, 41, 0.55);
  }
  .typeBut1 {
    color: #496dff;
    background: #f5f7fc;
    border: 1px solid #5a8bff;
    &:hover {
      background: #edf1fb;
    }
  }
  .typeBut2 {
    color: #39ce78;
    background: #f5fff9;
    border: 1px solid #39ce78;
    &:hover {
      background: #e7fbee;
    }
  }
  .typeBut3 {
    color: #fe5a57;
    background: #fff3f3;
    border: 1px solid #fe5a57;
    &:hover {
      background: #fbe6e6;
    }
  }
}
.i_await {
  cursor: pointer;
  transition: 0.3s;
  &:hover {
    transform: scale(1.2);
  }
}
</style>
